import React,{memo,useState,useEffect} from 'react'
import { connect } from 'react-redux'
import SearchInput from '../../components/SearchInput/SearchInput'
import DataCard from '../../components/my/DataCard/DataCard.jsx'
import Album from '../../components/main/album/Album'
import * as actionTypes from './store/actionCreators'
import "./My.css"
let AlbumIdUrl ;



const My = (props) => {
    const {getDetailDataDispatch,personalized}=props;
    // console.log(props,'1');
    let [index,setIndex] = useState(0);
    let [AlbumId,setAlbumId] = useState(6970160184);
    AlbumIdUrl = AlbumId;
    
    useEffect(() => {
        getDetailDataDispatch()
        // console.log('---------------------||||||||||||||||||')
    }, [AlbumId])
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [])
   
    return (
        <div className="my_main">
            <div className="container_top_my">
                <div className="topBar">
                    <div className="section">
                        <div className={`option ${index ==0 ? "active": "" }`} >
                    我的
                        </div>
                
                 </div>
            
            </div>
            <SearchInput />
            </div>
            <DataCard />
            <div className="album_container">
            <Album  personalized={personalized} name={"最近播放"} min={3} max={10} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
            <Album  personalized={personalized} name={"自建歌单"} min={11} max={17} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
            <Album  personalized={personalized} name={"收藏歌单"} min={18} max={25} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
            <Album  personalized={personalized} name={"智能分类"} min={26} max={30} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
            <div className="nothing"></div>
            </div>

        </div>
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            dispatch(actionTypes.getPersonalized())
            
            
        }
    }
}
const mapStateToProps = (state) => {
    // console.log(state,'state')
    
    return {
        personalized:state.main.personalized,
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(My))
